<template>
  <div class="app-container menu-content">
    <div style="float:left;width: 200px;">
      <div class="menu-bg">
        <label>菜单列表</label>
        <label class="my-icon-plus-label" style="right: 10px;">
          <el-dropdown trigger="click" placement="bottom-start">
            <span>
              <svg-icon icon-class="icon-line-more" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="addMenu()">
                <i class="el-icon-plus" style="font-weight: 600;"></i>
                新增
              </el-dropdown-item>
              <el-dropdown-item @click.native="sortMenu()">
                <svg-icon icon-class="icon-sort" />
                排序
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </label>
      </div>
      <el-tabs v-model="activeMenu" tab-position="left">
        <el-tab-pane v-for="(item,index) in topMenus" :key="index" :name="item.name">
          <div class="custom-menu-node" style="position: relative;" slot="label">
            <div @click="handleTabClick(item)">{{item.label}}</div>
            <div style="position: absolute;top: 0;right: 10px;">
              <el-dropdown trigger="click" placement="bottom-start">
                <span class="el-dropdown-link">
                  <svg-icon icon-class="icon-line-more" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="editMenu(item)">
                    <svg-icon icon-class="icon-edit" style="margin-right: 5px;" />
                    修改
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="doRemoveMenu(item)">
                    <svg-icon icon-class="icon-table" style="margin-right: 5px;" />删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="float:right;width: calc(100% - 210px);height: calc(100% - 50px);">
      <div class="menu-bg">
        <label>应用列表</label>
        <label class="my-icon-plus-label">
          <el-dropdown trigger="click" placement="bottom-start">
            <span>
              <svg-icon icon-class="icon-line-more" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="addSubMenu()">
                <i class="el-icon-plus" style="font-weight: 600;"></i>
                新增
              </el-dropdown-item>
              <el-dropdown-item @click.native="sortSubMenu()">
                <svg-icon icon-class="icon-sort" />
                排序
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </label>
      </div>
      <el-table class="root-table" ref="tableGrid" :data="subMenus" border :row-style="rowStyle" :fit="true"
        height="100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="60" align="left" :key="-100">
        </el-table-column>
        <el-table-column prop="label" label="标题" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="200">
          <template slot-scope="scope">
            <el-button @click="editSubMenu(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="doRemoveMenu(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="doViewScene(scope.row)" type="text" size="small">表格列表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog custom-class="my-common-dialog" :width="dialogWidth" :visible.sync="dialogShow" :show-close="false"
      :close-on-click-modal="false">
      <div ref="refCommFormDiv">
        <div ref="refCommForm" :title="dialogTitle" :data="data" :dataList="dataList" :is="currentView"
          v-if="dialogShow" keep-alive></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getTopMenus,
    getSubMenus,
    removeMenu
  } from '@/api/system/menu'
  import menuEdit from '@/views/system/menu/edit'
  import menuSort from '@/views/system/menu/sortMenu'
  export default {
    name: 'sys-menu-mgr',
    components: {
      menuEdit,
      menuSort
    },
    data() {
      return {
        activeMenu: '',
        topMenus: [],
        subMenus: [],
        rowStyle: {
          height: '40px'
        },
        form: {
          name: '',
          label: '',
          Id: 0,
          Icon: '',
          ParentId: 0,
          SortIndex: 0
        },
        data: {
          ParentId: 0
        },
        clickMenu: null,
        dialogWidth: '45%',
        dialogShow: false,
        currentView: '',
        dialogTitle: '',
        multipleSelection: [],
        dataList: []
      }
    },
    created() {
      var that = this
      this.getList()
      this.addClickEvent()
    },
    methods: {
      addClickEvent() {
        document.addEventListener('mousedown', this.handleClickEvent, false)
      },
      removeClickEvent() {
        document.removeEventListener('mousedown', this.handleClickEvent, false)
      },
      handleClickEvent(e) {
        let isIn = false
        let colDropMenus = document.querySelectorAll('.el-popper')
        colDropMenus.forEach((colDropMenu) => {
          if (colDropMenu.contains(e.target)) {
            isIn = true
            return false
          }
        })
        if (this.dialogShow) {
          if (!this.$refs.refCommFormDiv.contains(e.target)) {
            if (!isIn) {
              this.handleFormSave()
            }
          }
        }
      },
      /** 查询列表 */
      getList() {
        getTopMenus().then(res => {
          if (res.status) {
            this.topMenus = res.outputData.list
            if (this.topMenus.length > 0 && this.activeMenu == 0) {
              this.handleTabClick(this.topMenus[0])
            }
          }
        })
      },
      handleTabClick(item) {
        this.clickMenu = item
        this.activeMenu = item.name
        this.subMenus = []
        if (!this.activeMenu) {
          return
        }
        getSubMenus({
          parentId: this.activeMenu
        }).then(res => {
          if (res.status) {
            this.subMenus = res.outputData.list
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleFormSave(done) {
        this.$refs.refCommForm.submitForm()
      },
      addMenu() {
        this.dialogTitle = '新增菜单'
        this.currentView = 'menuEdit'
        this.data = this.form
        this.dataList = []
        this.dialogShow = true
      },
      sortMenu() {
        this.dialogTitle = '菜单排序'
        this.currentView = 'menuSort'
        this.data.ParentId = 0
        this.dataList = this.topMenus
        this.dialogShow = true
      },
      editMenu(item) {
        this.dialogTitle = '修改菜单'
        this.currentView = 'menuEdit'
        this.data = item
        this.dataList = []
        this.dialogShow = true
      },
      addSubMenu() {
        this.dialogTitle = '新增应用'
        this.currentView = 'menuEdit'
        this.form.ParentId = Number(this.activeMenu)
        this.data = this.form
        this.dataList = this.topMenus
        this.dialogShow = true
      },
      sortSubMenu() {
        this.dialogTitle = '应用排序'
        this.currentView = 'menuSort'
        this.data.ParentId = 1
        this.dataList = this.subMenus
        this.dialogShow = true
      },
      editSubMenu(item) {
        this.dialogTitle = '修改应用'
        this.currentView = 'menuEdit'
        this.data = item
        this.dataList = this.topMenus
        this.dialogShow = true
      },
      doCloseMenu(reload) {
        this.dialogShow = false
        if (reload) {
          if (this.data && this.data.ParentId > 0) {
            this.handleTabClick(this.clickMenu)
          } else {
            this.getList();
          }
        }
      },
      doRemoveMenu(item) {
        var Ids = []
        var msg = ''
        if (item.ParentId > 0) {
          msg = '是否确认删除当前应用？'
          if (this.multipleSelection.length > 0) {
            this.multipleSelection.forEach((data) => {
              Ids.push(data.Id)
            })
            msg = '是否确认删除选中的 ' + Ids.length + ' 条应用？'
          }
        } else {
          msg = '是否确认删除当前菜单？'
        }
        if (Ids.length == 0) {
          Ids.push(item.Id)
        }
        this.$confirm(
            msg,
            '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
          .then(() => {
            removeMenu({
              Ids: JSON.stringify(Ids)
            }).then(res => {
              if (res.status) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                if (item.ParentId > 0) {
                  this.handleTabClick(this.clickMenu)
                } else {
                  if (this.activeMenu == item.name) {
                    this.activeMenu = '0'
                  }
                  this.getList()
                }
              }
            })
          })
      },
      doViewScene(item) {
        this.$$parent(this, "doViewScene", item)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .menu-content {
    height: 100%;

    .menu-bg {
      background-color: #f0f0f0;
      height: 40px;
      line-height: 40px;
      border-radius: 5px;
      margin-bottom: 5px;
      font-size: 13px;
      padding-left: 5px;
      position: relative;

      .my-icon-plus-label {
        position: absolute;
        right: 10px;
        top: 0px;
        cursor: pointer;
      }
    }

    .el-tabs--left .el-tabs__header.is-left {
      width: calc(100% - 2px);
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: left;
      padding-left: 5px;
      padding-right: 0px;
    }

    .custom-menu-node {
      &:active {
        .el-dropdown-link .svg-icon {
          visibility: initial;
        }
      }

      &:hover {
        .el-dropdown-link .svg-icon {
          visibility: initial;
        }
      }
    }
  }
</style>